import { useEffect, useState } from "react";
import { Button, Dialog, Form, Input, Select, Textarea } from "tdesign-react";
import { HCommonProduct } from "../../../../../api/modules/product";
import { CategoryItem } from "../../api/api.interface";
import "./index.scss";
import { FileUpload } from "../../../../../components";


interface AddProductProps {
  visible: boolean;
  onClose?: () => void;
} 

interface Product {
  name: string;
  price: string;
  code: string;
  barcode: string;
  unit: string;
  cost_price: string;
  status: number;
  category_id: string;
  description: string;
  min_stock: number;
  spec: string;
}

/**
 * 新增商品
 * @param param0 
 * @returns 
 */
const AddProduct: React.FC<AddProductProps> = ({ visible, onClose }) => {
  useEffect(() => {
    setVisible(visible);
    initFilterSelectOption();
  }, [visible]);

  const [_visible, setVisible] = useState<boolean>(visible);

  // 表单
  const [formData, setFormData] = useState<Product>({
    name: '',
    price: '',
    code: '',
    barcode: '',
    unit: '',
    cost_price: '',
    status: 1,
    category_id: '',
    description: '',
    min_stock: 0,
    spec: ''
  });

  // option选项
  const [filterOptions, setFilterOptions] = useState<{
    category: Array<{
      label: string;
      value: string;
    }>
  }>({
    category: []
  });

  /**
   * 初始化搜索选择项
   */
  const initFilterSelectOption = () => {
    HCommonProduct.queryProductCategoryList<CategoryItem[]>('查询类别列表').then(data => {
      const options = data.map(itm => {
        return {
          label: itm.name,
          value: itm.id
        }
      });
      setFilterOptions({
        ...filterOptions,
        category: options
      })
    });
  }

  /**
   * 输入框切换
   * @param type 
   * @param value 
   */
  const onInputChange = (type: string, value: string) => {
    setFormData({
      ...formData,
      [type]: value
    })
  }

  /**
   * 选择切换
   * @param type 
   * @param value 
   */
  const onSelectChange = (type: string, value: string) => {
    setFormData({
      ...formData,
      [type]: value
    });
  }
  

  // 弹框关闭
  const onDialogClose = () => {
    setVisible(false);
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    onClose && onClose()
  }

  return <Dialog visible={_visible} width={'60%'} header="新增商品" onClose={onDialogClose}>
    <div className="add-product__content" style={{ height: '300px'}}>
      <Form layout='inline'>
            <Form.FormItem name="name" label="商品名称" requiredMark>
              <Input placeholder="商品名称" onChange={(v) => onInputChange('name', v)} />
            </Form.FormItem>
            <Form.FormItem name="password" label="商品类别" requiredMark>
              <Select
                value={formData.category_id}
                placeholder="商品类别"
                clearable
                options={filterOptions.category}
                onChange={(v) => onSelectChange('category', v)}
              />
            </Form.FormItem>
            <Form.FormItem name="name" label="编码" requiredMark>
              <Input placeholder="商品编码" onChange={(v) => onInputChange('code', v)} />
            </Form.FormItem>
            <Form.FormItem name="name" label="条码" requiredMark>
              <Input placeholder="条码" onChange={(v) => onInputChange('barcode', v)} />
            </Form.FormItem>
            <Form.FormItem name="name" label="单位" requiredMark>
              <Input placeholder="单位：如个、包、盒" onChange={(v) => onInputChange('unit', v)} />
            </Form.FormItem>
            <Form.FormItem name="name" label="规格" requiredMark>
              <Input placeholder="规格" onChange={(v) => onInputChange('spec', v)} />
            </Form.FormItem>
            <Form.FormItem name="name" label="销售价格" requiredMark>
              <Input placeholder="销售价格" onChange={(v) => onInputChange('price', v)} />
            </Form.FormItem>
            <Form.FormItem name="name" label="成本价格" requiredMark>
              <Input placeholder="成本价格" onChange={(v) => onInputChange('cost_price', v)} />
            </Form.FormItem>
            <Form.FormItem name="name" label="最小库存预警">
              <Input placeholder="最小库存预警" onChange={(v) => onInputChange('min_stock', v)} />
            </Form.FormItem>
            <Form.FormItem name="name" label="描述">
              <Textarea placeholder="描述" onChange={(v) => onInputChange('description', v)} />
            </Form.FormItem>
            <Form.FormItem name="password" label="图片">
              <FileUpload></FileUpload>
            </Form.FormItem>
          </Form>
    </div>
  </Dialog>
}

export default AddProduct;